import PropTypes from "prop-types";
import React from 'react'
import request from '@/utils/request'
import { useRef } from 'react';
import { Form, Input, Button, message, Modal, Table } from 'antd';

import { useState } from 'react';
import { useEffect, useCallback } from 'react';

function BuildingModel({ ModelInfo, isAdmin, Visible, change, nowbuilding }) {

    ;
    const [adminForm] = Form.useForm();
    const { confirm } = Modal;
    //modal弹出框信息
    const [buildingInfo, setBuildingInfo] = useState([])
    const inpvalue = useRef()
    const inpphone = useRef()
    useEffect(() => {
        getTableInfo(nowbuilding.id)

    }, [Visible])
    const columns = [
        {
            title: 'UID',
            dataIndex: 'id',
            // key: 'name',
        },
        {
            title: '姓名',
            dataIndex: 'name',
            // key: 'age',
        },
        {
            title: '电话号',
            dataIndex: 'phone',
            // key: 'address',
        },
        {
            title: '操作',
            key: 'action',
            render: (row) => {
                return (
                    <Button type='primary' onClick={() => {
                        removePeople(row)
                    }} danger>移除</Button>
                )

            }
        }
    ];
    //关闭model
    const handleCancel = useCallback(() => {
        change(false)
        setBuildingInfo([])

    }, []);
    //获取点击宿舍的信息
    const getTableInfo = useCallback(async function (id) {
        if (isAdmin == 'admin') {
            const { data } = await request.get('/building/getAdminTableData', {
                params: {
                    buildingId: id
                }
            })
            setBuildingInfo(data.data.admins)
        } else if (isAdmin == 'clean') {
            const { data } = await request.get('/building/getCleanerTableData', {
                params: {
                    buildingId: id
                }
            })
            setBuildingInfo(data.data.cleaners)
        }
    }, [isAdmin])

    //给宿舍楼添加管理员/保洁员
    const addAdminToBuilding = useCallback(async (value1, value2) => {
        if (isAdmin == 'admin') {
            var { data } = await request.post('/building/addAdminToBuilding', {
                adminAccount: value1,
                buildingId: nowbuilding.id

            })
        } else if (isAdmin == 'clean') {
            var { data } = await request.post('/cleaner/addCleaner', {
                name: value1,
                buildingId: nowbuilding.id,
                phone: value2.current.props.value,

            })

        }
        data.success == true ? message.success('添加成功') : message.error('添加失败')
        change(false)
        // setIsModalVisible(false);
    }, [isAdmin])
    //删除宿舍楼管理员/保洁员
    const removePeople = useCallback(async (row) => {
        if (isAdmin === 'admin') {
            var { data } = await request.delete('/building/removeBuildingAdmin', {
                params: {
                    adminId: row.id,
                    buildingId: nowbuilding.id
                }
            })

        } else if (isAdmin === 'clean') {
            var { data } = await request.delete('/cleaner/delCleaner', {
                params: {
                    cleanerId: row.id,
                }
            })
        }
        data.success == true ? message.success('删除成功') : message.error('删除失败')
        change(false)
        // setIsModalVisible(false);
    })
    return (<>
        <Modal title={ModelInfo.titleA} visible={Visible}
            destroyOnClose

            onCancel={handleCancel}
            footer={
                <Button onClick={() => {
                    handleCancel()
                }}>关闭</Button>
            }
        >
            <p >{ModelInfo.titleB}</p>
            <Table rowKey="id" pagination={false} columns={columns} dataSource={buildingInfo} />
            <p>{ModelInfo.titleC}</p>

            <Form form={adminForm} name="horizontal_login" layout="inline"
                preserve={false}
            >
                <Form.Item
                    name="username"
                >
                    <Input placeholder={ModelInfo.titleD} ref={inpvalue} />
                </Form.Item>
                {isAdmin == 'clean' ?
                    <Form.Item
                        name="phone"
                    >
                        <Input placeholder='请输入保洁员联系方式' ref={inpphone} />
                    </Form.Item>
                    : ''


                }
                <Button type='primary'
                    onClick={() => {
                        addAdminToBuilding(inpvalue.current.props.value, inpphone)
                    }}
                >添加</Button>
            </Form>

        </Modal>
    </>)
}
BuildingModel.propTypes = {
    ModelInfo: PropTypes.object,
    isAdmin: PropTypes.string
};


export default BuildingModel;